<template>
    <div class="produce-process-page">
        <el-card>
            <div class="header-bar">
                <span class="title">生产工序管理</span>
                <el-input v-model="search.keyword" placeholder="工序编码/名称/说明" size="small"
                    style="width:220px;margin-right:10px;" clearable />
                <el-select v-model="search.enabled" placeholder="状态" size="small" style="width:110px;margin-right:10px;"
                    clearable>
                    <el-option label="启用" :value="true" />
                    <el-option label="停用" :value="false" />
                </el-select>
                <el-button type="primary" size="small" @click="onAdd">新增工序</el-button>
            </div>
            <el-table :data="filteredList" border style="width:100%;margin-top:8px;">
                <el-table-column prop="code" label="工序编码" width="110" />
                <el-table-column prop="name" label="工序名称" min-width="140" />
                <el-table-column prop="desc" label="工序说明" min-width="180" />
                <el-table-column prop="enabled" label="状态" width="180" align="center">
                    <template #default="{ row }">
                        <el-switch v-model="row.enabled" active-text="启用" inactive-text="停用" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" fixed="right" align="center">
                    <template #default="{ row }">
                        <el-button size="small" type="info" link @click="onEdit(row)">编辑</el-button>
                        <el-button size="small" type="danger" link @click="onDelete(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 新增/编辑弹窗 -->
        <el-dialog v-model="editDialog.visible" :title="editDialog.isEdit ? '编辑工序' : '新增工序'" width="400px">
            <el-form :model="editDialog.form" label-width="88px">
                <el-form-item label="工序编码">
                    <el-input v-model="editDialog.form.code" />
                </el-form-item>
                <el-form-item label="工序名称">
                    <el-input v-model="editDialog.form.name" />
                </el-form-item>
                <el-form-item label="工序说明">
                    <el-input v-model="editDialog.form.desc" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="editDialog.form.enabled" active-text="启用" inactive-text="停用" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="editDialog.visible = false">取消</el-button>
                <el-button type="primary" @click="onSaveEdit">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const search = reactive({ keyword: '', enabled: '' })

// 15条医药生产工序模拟数据
const processList = ref([
    { code: 'OP001', name: '原料检验', desc: '对采购原料进行质量检验', enabled: true },
    { code: 'OP002', name: '原料称量', desc: '精确称量所需原料', enabled: true },
    { code: 'OP003', name: '投料混合', desc: '将原料投入混合罐混合', enabled: true },
    { code: 'OP004', name: '反应处理', desc: '进行化学反应过程', enabled: true },
    { code: 'OP005', name: '离心分离', desc: '通过离心机进行固液分离', enabled: true },
    { code: 'OP006', name: '精制过滤', desc: '多级过滤提升纯度', enabled: true },
    { code: 'OP007', name: '浓缩蒸发', desc: '浓缩产品至目标含量', enabled: true },
    { code: 'OP008', name: '干燥处理', desc: '低温或真空干燥成品', enabled: true },
    { code: 'OP009', name: '制粒包衣', desc: '制成粒状并包衣', enabled: true },
    { code: 'OP010', name: '压片', desc: '压制成片剂', enabled: true },
    { code: 'OP011', name: '灌装', desc: '将成品灌装入瓶', enabled: true },
    { code: 'OP012', name: '封口贴签', desc: '进行封口、贴标签', enabled: true },
    { code: 'OP013', name: '外观检验', desc: '检查成品外观合格性', enabled: true },
    { code: 'OP014', name: '成品检测', desc: '进行成品的质量检测', enabled: true },
    { code: 'OP015', name: '入库', desc: '成品入库登记', enabled: true }
])

const filteredList = computed(() => {
    return processList.value.filter(p =>
        (search.enabled === '' || p.enabled === search.enabled) &&
        (!search.keyword ||
            p.code.includes(search.keyword) ||
            p.name.includes(search.keyword) ||
            (p.desc && p.desc.includes(search.keyword))
        )
    )
})

const editDialog = reactive({
    visible: false,
    isEdit: false,
    form: { code: '', name: '', desc: '', enabled: true }
})

function onAdd() {
    Object.assign(editDialog.form, { code: '', name: '', desc: '', enabled: true })
    editDialog.isEdit = false
    editDialog.visible = true
}
function onEdit(row) {
    Object.assign(editDialog.form, { ...row })
    editDialog.isEdit = true
    editDialog.visible = true
}
function onSaveEdit() {
    if (!editDialog.form.code || !editDialog.form.name) {
        ElMessage.warning('请填写完整信息')
        return
    }
    if (editDialog.isEdit) {
        const idx = processList.value.findIndex(v => v.code === editDialog.form.code)
        if (idx !== -1) Object.assign(processList.value[idx], editDialog.form)
    } else {
        if (processList.value.some(v => v.code === editDialog.form.code)) {
            ElMessage.warning('工序编码重复')
            return
        }
        processList.value.push({ ...editDialog.form })
    }
    editDialog.visible = false
}
function onDelete(row) {
    const idx = processList.value.findIndex(v => v.code === row.code)
    if (idx !== -1) processList.value.splice(idx, 1)
}
</script>

<style scoped>
.produce-process-page {
    padding: 28px 38px 30px 38px;
    min-height: 100vh;
    background: #fff;
}

.header-bar {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    gap: 10px;
}

.header-bar .title {
    font-size: 1.18rem;
    font-weight: 600;
    margin-right: 22px;
}
</style>
